<template>
    <div class="singer-home">
        <!-- 导航页 -->
        <van-nav-bar title="歌单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <img :src="singer.singer_pic" alt="">
        <!-- 标签页 -->
        <van-tabs v-model="active">
            <van-tab title="百科">
                <SingerIntro :singerId="id" />
            </van-tab>
            <van-tab title="歌曲">
                <SingerSong :singerId="id" />
            </van-tab>
        </van-tabs>
    </div>

</template>
 
<script>
import SingerIntro from "./components/SingerIntro.vue"
import SingerSong from "./components/SingerSong.vue"
export default {
    data() {
        return {
            active: 0,
            id: this.$route.params.id,
            singer: {}
        }
    },
    created() {
        //获取到状态管理中对象的数据
        this.singer = this.$store.state.singer
        // console.log(this.singer)
    },
    methods: {
        onClickLeft() {
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
        },
    },
    components: {
        SingerIntro,
        SingerSong
    }
}
</script>

<style scoped>

</style>